<template>
  <cj-popup v-model="showPicker" round position="bottom" closeable :closeIconStyle="'font-size: 0.5rem; color: #ccc'" :closeIcon="'icon-guanbi'" @close="hidePicker">
    <div class="c-p c-flex-row c-justify-center c-aligni-center c-fs28 c-hh80 c-lh80 c-fw-b">
      <solt name="title">筛选</solt>
    </div>
    <div class="c-bg-sgray c-ph24 c-pt24 c-pb120">
      <div class="c-bg-white c-pv30 c-ph20 c-p c-br20 c-text-hidden">
        <div class="c-maxh800 c-contexty-scroll">
          <div
            class="c-flex-row c-aligni-center c-justify-sb"
            :class="[index == dataList.length - 1 ? '' : 'c-bd-b1-f5', index == 0 ? 'c-pb30' : index == dataList.length - 1 ? 'c-pt30' : 'c-pv30']"
            v-for="(item, index) in dataList" :key="index" @click="checkSelectType(index)"
          >
            <div class="c-fs24">{{ item.name }}</div>
            <div class="c-fs28 iconfont" :class="selectactiveIndex == index ? 'theme-fc' : 'fc-D5D8DE'" v-html="selectactiveIndex == index ? '&#xe6eb;' : '&#xe797;'"></div>
          </div>
        </div>
      </div>
      <div @click="confirmType" class="c-pf c-p-l0 c-p-b0 c-bg-white c-ph24 c-pv12 c-w100 c-fc-white c-fs28 c-box-shadowEdu">
        <div class="c-w100 theme-bg c-br40 c-textAlign-c c-hh64 c-lh64">确认</div>
      </div>
    </div>
  </cj-popup>
</template>
<script>
export default {
  name: 'myPicker',
  components: {},
  props: {
    dataList: {
      type: Array,
      default: () => {
        return []
      }
    },
    activeIndex: {
      type: Number,
      default: -1
    },
    showPicker: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      selectactiveIndex: -1, // type切换值非最后选中值
    };
  },
  watch: {
    showPicker: {
      handler() {
        this.$nextTick(() => {
          this.selectactiveIndex = this.activeIndex;
        });
      },
      immediate: true,
      deep: true
    }
  },
  methods: {
    hidePicker() {
      this.showPicker = false;
      this.$emit('hidePicker');
    },
    checkSelectType(index) {
      this.selectactiveIndex = index;
    },
    confirmType() {
      this.showPicker = false;
      this.$emit('confirmType', this.selectactiveIndex);
    }
  }
};
</script>

<style scoped>
.fc-D5D8DE {
  color: #D5D8DE;
}
</style>
